import React, { useEffect, useState } from 'react'
import styles from '../sass/parseresult1.module.scss';
import { Editor } from '@tinymce/tinymce-react'
import { useSelector, useDispatch } from 'react-redux';

import { setChangeContent, setResultValue } from "../reducer/parseResult"
import { stringify } from 'querystring';

export default function RichFile(props: any) {
    const dispatch = useDispatch()
    const state = useSelector((state: any) => state.ParseResult.value)
    const [value, setValue] = useState(state)
    const onValueChange = (value: any) => {
        setValue(value)


        dispatch(setChangeContent(value.toString()))
    }


    return (
        <div className={styles.welcomeContainer} style={{
            marginTop: "15px"
        }}>
            <Editor
                value={value}
                apiKey="11i1tzwx2ezi7bq1eetjxgt22c8j2c1pghrgddvsdaml4rgh"
                init={{
                    language: 'zh_CN',
                    // plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter',
                    // toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
                    fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
                }}
                onEditorChange={onValueChange}
            />
        </div>
    )
}


